<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>柱状图示例</title>
    <!-- 引入 echarts.js -->
    <script src="../echarts.min.js"></script>
</head>
<body>
<!-- 在这里创建一个 div，用于显示图表 -->
<div id="chart" style="width: 600px; height: 400px;"></div>

<!-- 在这里编写 JavaScript 代码 -->
<script type="text/javascript">
    // 初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('chart'));

    // 配置项
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['上部分', '下部分']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'],
            axisTick: {
                alignWithLabel: true,
                lineStyle: {
                    width: 2
                }
            },
            axisLabel: {
                interval: 0,
                rotate: 45,
                fontSize: 12
            },
            // 设置滚动条
            axisPointer: {
                type: 'shadow',
                label: {
                    show: true,
                    formatter: function (params) {
                        return params.value;
                    }
                }
            },
            triggerEvent: true,
            // 设置boundaryGap为true
            boundaryGap: true
        },
        yAxis: {
            type: 'value',
            min: 0
        },
        dataZoom: [{
            type: 'inside',
            start: 0,
            end: 40
        }, {
            start: 0,
            end: 40,
            handleIcon: 'M0,0 v9.7h5 v-9.7h-5 Z M10,0 v9.7h5 v-9.7h-5 Z',
            handleSize: '120%',
            handleStyle: {
                color: '#eee'
            },
            bottom: '2%'
        }],
        series: [{
            name: '上部分',
            type: 'bar',
            data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300],
            // 每个柱子由上下两段组合成
            stack: '组合',
            emphasis: {
                focus: 'series'
            }
        }, {
            name: '下部分',
            type: 'bar',
            data: [200, 100, 400, 300, 600, 500, 800, 700, 1000, 900, 1200, 1100, 1300],
            // 每个柱子由上下两段组合成
            stack: '组合',
            emphasis: {
                focus: 'series'
            }
        }]
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);

    // 默认展示第一个柱子的提示框
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: 6
    });
</script>
</body>
</html>
